<template>
  <div class="option-wrapper">
    <div class="option-main">
      <a-form layout="vertical" ref="formRef" :model="formState" :rules="rules" @finish="handleSubmit">
        <div class="option-column">
          <div class="column-title">校本实验基础信息</div>
          <div class="column-content">
            <div class="content-item">
              <a-form-item label="实验名称" name="name">
                <a-input v-model:value="formState.name" placeholder="请输入实验名称" />
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="实验ID" name="customer_experiment_id">
                <a-input :disabled="true" v-model:value="formState.customer_experiment_id" placeholder="请输入实验ID" />
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="实验类型" name="experiment_category_name">
                <a-input v-model:value="formState.experiment_category_name" placeholder="请输入实验类型" />
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="共享教师" name="name">
                <a-input v-model:value="formState.name" placeholder="请输入共享教师" />
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="入库时间" name="name">
                <a-input v-model:value="formState.name" placeholder="请输入入库时间" />
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="启用状态" name="name">
                <a-input v-model:value="formState.name" placeholder="请输入启用状态" />
              </a-form-item>
            </div>
          </div>
        </div>

        <div class="option-footer">
          <a-button class="opt-btn" @click="resetForm">取消</a-button>
          <a-button class="opt-btn" type="primary" htmlType="submit">保存</a-button>
        </div>
      </a-form>
    </div>
  </div>
</template>
<script setup>
import router from "@/routers";
import { ref, computed, onMounted } from "vue";
import { PlusOutlined } from "@ant-design/icons-vue";
import api from "@/api";
import { useRoute } from "vue-router";
import { message } from "ant-design-vue";
import { getCityId } from "@/utils/city.ts";
const route = useRoute();
//获取当前url参数
const query = computed(() => route.query);
const formState = ref({
});
const classOptions = ref();
onMounted(async () => {
  if (query.value.id) {
    getData();
  }
});

const rules = ref({
  name: [
    {
      required: true,
      message: "请输入客户名称",
      trigger: "blur",
    },
  ],
  class: [
    {
      required: true,
      message: "请选择客户分类",
      trigger: "change",
    },
  ],
});
const formRef = ref(null);
const handleSubmit = (values) => {
  formRef.value.validate().then(async () => {
    console.log(formState.value);
    if (query.value.id) {
      //编辑
      const res = await API.CustomerUpdate({
        ...formState.value,
        city_id: formState.value.city_id[1],
        customer_id: query.value.id,
      });
      console.log(res);
      if (res) {
        formRef.value.resetFields();
        //提示编辑成功
        message.success("编辑成功");
        //后退
        router.go(-1);
      }
    } else {
      //新增
      const res = await API.CustomerCreateCustomer({ ...formState.value, enabled: true, city_id: formState.value.city_id[1], create_time: new Date().getTime() });
      console.log(res);
      if (res) {
        formRef.value.resetFields();
        //提示新增成功
        message.success("新增成功");
        //后退
        router.go(-1);
      }
    }
  });
};
const resetForm = () => {
  formState.value = {};
  router.go(-1);
};
const getData = async () => {
  let params = {
    customer_experiment_id: query.value.id,
  };
  const res = await api.apiCustomerExperimentFetchModelPost(params);
  formState.value = res.data;
};

</script>
